import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../../store/actions';
import { SideBar } from 'antd-mobile'
import List from '../../../components/List'
class Index extends Component {
  state = {
    key: 0
  }
  handleChange(key) {
    this.setState({
      key,
    })
  }
  componentDidMount() {
    const action = actions.getTabList()
    this.props.dispatch(action)
    this.handleChange(0)
  }
  render() {
    const { tabList } = this.props
    const { key } = this.state
    console.log(tabList);
    return (
      // 12.设置分类数据的默认数据，完成初始化数据展示
      <div className="classify">
        {
          tabList.length > 0 && <SideBar onChange={ (key) => this.handleChange(key) } defaultActiveKey="0">
          {tabList.map((item, i) => (
            <SideBar.Item key={i} title={item.title} />
          ))}
        </SideBar>
        }
        <div className="right">
          { tabList.length > 0 && <List list={ tabList[key].children }></List> }
        </div>
      </div>
    );
  }
}

const mapState = (state) => {
  return { ...state }
}
const mapDiapatch = dispatch => {
  return { dispatch }
}
export default connect(mapState, mapDiapatch)(Index);
